<template>
	<view class="editList">
		<view class="tigs">拖动可调整常用应用顺序,点击删除图标可移除</view>
		<view class="index-grid">
			<view class="grid-title title-box">
				<view>常用应用 <span class="maxSet">最多设置12个</span></view>
				<view @click="editModel()" class="btn">{{isEdit?'保存':'编辑'}}</view>
			</view>

			<view class="main-item" id="mainItem">
				<drag-and-drop-sort :style="{height: `${Math.ceil(oftenList.length/4)*100}px`}"
					:controlsList="oftenList" :controlsSize="{width: 150, height: 88}" @setList="setList">
					<template #content="{item,index}">
						<view :id="`delMove${item.id}`" class="drag-item" @click="deleteItem($event,item,index)">
							<view class="dot delete-dot">
								<!-- <u-icon name="minus" color="#fff"></u-icon> -->
								<image class="dot-img" src="../../static/images/index/delapp.png"></image>
							</view>
							<image class="item-icon" :src="item.ioc"></image>
							<view class="item-text">{{item.title}}</view>
						</view>
					</template>
				</drag-and-drop-sort>
				<!-- <view class="item" :id="`delMove${item.id}`" v-for="(item,index) in oftenList" :key="item.id"
					@click="deleteItem($event,item,index)">
					<view class="dot add-dot">
						<image class="dot-img" src="../../static/images/index/delapp.png"></image>
					</view>
					<image class="item-icon" :src="item.ioc"></image>
					<view class="item-text">{{item.title}}</view>
				</view> -->
				<!-- <view class="item" :id="`delMove${item.id}`" v-for="(item,index) in oftenList" :key="item.id"
					@click="deleteItem($event,item,index)">
					<view v-if="isEdit" class="dot delete-dot">
						<u-icon name="minus" color="#fff"></u-icon>
					</view>
					<image class="item-icon" :src="item.ioc"></image>
					<view class="item-text">{{item.title}}</view>
				</view> -->
			</view>
		</view>
		<view class="tigs" style="text-align: left;"><span
				style="font-size: 32rpx;color: #383838;margin-right: 12rpx;">可配置应用模块</span> 点击图标可添加至常用应用</view>
		<view class="index-grid">
			<view class="grid-title">
				<view>设备管理</view>
			</view>
			<view class="main-item">
				<view class="item" :id="`addMove${item.id}`" v-for="(item,index) in twoList" :key="item.id"
					@click="addItem(item)">
					<view v-if="isEdit && !item.isCheck" class="dot add-dot">
						<!-- <u-icon name="plus" color="#fff"></u-icon> -->
						<image class="dot-img" src="../../static/images/index/addapp.png"></image>
					</view>
					<image class="item-icon" :src="item.ioc"></image>
					<view class="item-text">{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class="index-grid">
			<view class="grid-title">
				<view>安全监管</view>
			</view>
			<view class="main-item">
				<view class="item" :id="`addMove${item.id}`" v-for="(item,index) in twoList2" :key="item.id"
					@click="addItem(item)">
					<view v-if="isEdit && !item.isCheck" class="dot add-dot">
						<!-- <u-icon name="plus" color="#fff"></u-icon> -->
						<image class="dot-img" src="../../static/images/index/addapp.png"></image>
					</view>
					<image class="item-icon" :src="item.ioc"></image>
					<view class="item-text">{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class="index-grid">
			<view class="grid-title">
				<view>教育培训</view>
			</view>
			<view class="main-item">
				<view class="item" :id="`addMove${item.id}`" v-for="(item,index) in twoList3" :key="item.id"
					@click="addItem(item)">
					<view v-if="isEdit && !item.isCheck" class="dot add-dot">
						<!-- <u-icon name="plus" color="#fff"></u-icon> -->
						<image class="dot-img" src="../../static/images/index/addapp.png"></image>
					</view>
					<image class="item-icon" :src="item.ioc"></image>
					<view class="item-text">{{item.title}}</view>
				</view>
			</view>
		</view>
		<!-- 只需要绑定购物车位置即可 -->
		<flyInCart ref="inCart" :cartBasketRect="cartBasketRect"></flyInCart>
	</view>
</template>

<script>
	//  加入购物车动画组件
	import flyInCart from './flyInCart.vue'
	import dragAndDropSort from '@/components/drag-and-drop-sort-A/drag-and-drop-sort-A.vue';
	export default {
		components: {
			flyInCart,
			dragAndDropSort
		},
		data() {
			return {
				// del 防抖
				offer1: false,
				// 初始位置
				copyItem: '',
				// 购物车位置
				cartBasketRect: '',
				// 是否编辑
				isEdit: true,
				// 常用应用数据
				oftenList: [],
				// 测试 下方数据
				twoList: [],
				twoList2: [],
				twoList3: [],
			}
		},
		onLoad(options) {

			this.oftenList = JSON.parse(options.fastList)
			this.initData()

		},
		onUnload() {
			var pages = getCurrentPages(); //当前页面栈
			if (pages.length > 1) {
				var beforePage = pages[pages.length - 2]; //获取上一个页面实例对象
				beforePage.data.needGetData = true;
			}
		},
		methods: {
			initData() {
				uni.$u.http.get('/base/mobile/sysMenuInfo/getMobileMenuListByRole').then(res => {
					if (res.code == 0) {
						if (res.data) {
							this.twoList = this.getList(res.data.deviceMenus)
							this.twoList2 = this.getList(res.data.safeMenus)
							this.twoList3 = this.getList(res.data.trainMenus)

							this.twoList.map(item => {
								this.oftenList.map(it => {
									if (item.title === it.title) {
										item.isCheck = true
									}
								})
							})
							this.twoList2.map(item => {
								this.oftenList.map(it => {
									if (item.title === it.title) {
										item.isCheck = true
									}
								})
							})
							this.twoList3.map(item => {
								this.oftenList.map(it => {
									if (item.title === it.title) {
										item.isCheck = true
									}
								})
							})
						}
					}
				})

			},
			getList(menu) {
				let list = []
				let step = 0
				menu.filter(item => item.menuPid != 0).forEach(item => {
					if (item) {
						if (item.menuUrl) {
							step++
							let obj = {
								id: item.id,
								title: item.menuName,
								ioc: item.menuIcon,
								isMarginLeft: step == 1 ? false : true,
								url: item.menuUrl
							}
							list.push(obj)
						}
					}
				})
				return list
			},
			addItem(item) {
				if (!this.isEdit) return

				if (this.oftenList.length >= 12) {
					uni.showToast({
						icon: 'none',
						title: '首页常用应用最多添加12个，超出部分请先移除后再添加'
					})
					return
				}
				if (item.isCheck) return
				item.isCheck = true

				if (!this.oftenList.length) {
					this.oftenList.push(item)
					return
				}
				this.oftenList.push(item)
				return
				// 飞入购物车动画 有bug
				// last元素
				let lastId = this.oftenList[this.oftenList.length - 1].id
				uni.createSelectorQuery().select(`#delMove${lastId}`).boundingClientRect(data => {
					this.cartBasketRect = data
				}).exec();
				let firstId = this.oftenList[0].id
				let firstData = ''
				uni.createSelectorQuery().select(`#delMove${firstId}`).boundingClientRect(data => {
					firstData = data
				}).exec();

				uni.createSelectorQuery().select(`#addMove${item.id}`).boundingClientRect(data => {
					this.$nextTick(() => {
						let isPrint = false
						if (this.oftenList.length % 4 === 0) {
							isPrint = true
						} else {
							isPrint = false
						}
						// this.$refs.inCart.addToCart(e, item, isPrint, 'del');

						this.$refs.inCart.addToCart(data, item, isPrint, 'add', firstData)
					})
				}).exec();
				setTimeout(() => {
					this.oftenList.push(item)
				}, 300)
			},
			deleteItem(e, item, index) {
				if (!this.isEdit) return
				if (this.offer1) return
				this.offer1 = true
				setTimeout(() => {
					this.offer1 = false
				}, 300)
				this.twoList.map(it => {
					if (it.title === item.title) {
						it.isCheck = false
					}
				})
				this.oftenList.splice(index, 1)
				return
				// 目标位置信息
				uni.createSelectorQuery().select(`#addMove${item.id}`).boundingClientRect(data => {
					this.cartBasketRect = data
				}).exec();

				// 点击item位置信息
				uni.createSelectorQuery().select(`#delMove${item.id}`).boundingClientRect(data => {
					let isPrint = false
					if (this.oftenList.length % 4 === 0) {
						isPrint = true
					} else {
						isPrint = false
					}
					this.$nextTick(() => {
						// this.$refs.inCart.addToCart(e, item, isPrint, 'del');
						this.$refs.inCart.addToCart(data, item, isPrint, 'del')
					})

				}).exec();
			},
			setList(data) {
				this.oftenList = data
			},

			editModel() {
				if (this.isEdit) {
					let params = []
					this.oftenList.map((item, index) => {
						let obj = {
							menuId: item.id,
							sort: index + 1
						}
						params.push(obj)
					})

					uni.$u.http.post('/base/mobile/userCommonApplet/setCommonApplet', params).then(res => {
						if (res.code == 0) {
							uni.$u.toast('保存成功')
							this.isEdit = !this.isEdit
							setTimeout(() => {
								uni.switchTab({
									url: '../work/index'
								})
							}, 1000)

						}
					})

				} else {
					this.isEdit = !this.isEdit
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.editList {
		background: #F5F5F5;
		padding: 0 16rpx;
	}

	.tigs {
		background-color: #F5F5F5;
		color: #8C8C8C;
		text-align: center;
		padding: 20rpx 0;
		font-size: 28rpx;
	}

	.index-grid {
		padding: 32rpx 20rpx 32rpx 20rpx;
		background: #fff;
		margin-bottom: 16rpx;
		border-radius: 12rpx;
		.title-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.grid-title {
			font-size: 32rpx;
			font-weight: 500;
			letter-spacing: 0px;
			color: #000000;
			padding-bottom: 20rpx;
		}


		.main-item {
			display: flex;
			flex-wrap: wrap;

			.item {
				padding: 20rpx 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 25%;
				position: relative;

				.dot {
					z-index: 22;
					position: absolute;
					right: 26rpx;
					top: 8rpx;
					width: 32rpx;
					height: 32rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					color: #fff;
					border-radius: 32rpx;

					.dot-img {
						width: 32rpx;
						height: 32rpx;
					}
				}

				.delete-dot {
					background: #ccc;
				}

				// .add-dot {
				// 	background: #0F53AC;
				// }

				.item-icon {
					width: 80rpx;
					height: 80rpx;
				}

				.item-text {
					font-size: 13px;
					font-weight: 400;
					letter-spacing: 0px;
					line-height: 0px;
					color: #000000;
					margin-top: 40rpx;
				}
			}

			.drag-item {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100%;
				flex-direction: column;
				// width: 25%;

				.dot {
					z-index: 22;
					position: absolute;
					right: 20rpx;
					top: 8rpx;
					border-radius: 50%;
					width: 32rpx;
					height: 32rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					color: #fff;

					.dot-img {
						// text-align: center;
						width: 32rpx;
						height: 32rpx;
					}
				}

				.delete-dot {
					background: #ccc;
				}

				.u-right {
					background: #ccc;
				}

				.item-icon {
					width: 80rpx;
					height: 80rpx;
				}

				.item-text {
					font-size: 13px;
					font-weight: 400;
					letter-spacing: 0px;
					line-height: 0px;
					color: #000000;
					margin-top: 40rpx;
				}

			}
		}
	}

	.btn {
		background: #0F53AC;
		font-weight: 400;
		height: 44rpx;
		line-height: 44rpx;
		padding: 8rpx 24rpx;
		margin-left: 10rpx;
		border-radius: 4px;
		color: #fff;
		font-size: 24rpx;
	}

	.maxSet {
		color: #A6A6A6;
		font-size: 14px;
		margin-left: 12rpx;
		font-weight: 400;
	}
</style>